<template>
	<view>
		<view class="between align-c set_item border">
			<view class="">头像</view>
			<image @click="uploadImg" v-if="avatar" :src="$img(avatar)" mode="aspectFill" class="head_icon" />
			<image @click="uploadImg" v-else src="/static/head.png" mode="aspectFill" class="head_icon" />
		</view>
		<view class="flex align-c set_item_box border">
			<view class="">昵称</view>
			<view class="f1 flex align-c set_item_box_right">
				<input type="text" class="gray" v-model="name" @blur="changeInfo" placeholder="请输入昵称" placeholder-class="p-c">
				<image src="/static/home/into-gray.png" mode="aspectFill" class="into" />
			</view>
		</view>
		<view class="flex align-c set_item_box">
			<view class="">手机号码</view>
			<view class="f1 flex align-c set_item_box_right">
				<view class="gray" v-if="info && info.mobile">{{ info.mobile }}</view>
				<image src="/static/home/into-gray.png" mode="aspectFill" class="into" />
			</view>
		</view>
		<view class="flex align-c set_item_box">
			<view class="">个人简介</view>
			<view class="f1 flex align-c set_item_box_right">
				<input type="text" class="gray" v-model="introduction" @blur="changeInfo" placeholder="介绍一下自己吧" placeholder-class="p-c">
				<image src="/static/home/into-gray.png" mode="aspectFill" class="into" />
			</view>
		</view>
		<u-popup :show="show" :round="10" mode="center">
			<view class="pop-box">
				<view class="info">确认退出登录？</view>
				<view class="flex">
					<view class="close f1" @click="close">取消</view>
					<view class="f1" @click="logout">确定</view>
				</view>
			</view>
		</u-popup>
		<button class="btn" @click="open">退出登录</button>
	</view>
</template>

<script>
	import config from '@/libs/config.js'
	export default {
		data() {
			return {
				shop_id: '',
				detail: null,
				info: null,
				show: false,
				avatar: '',
				name: '',
				baseUrl: config.baseUrl,
				introduction: '',
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.shop_id = uni.getStorageSync('shopId')
			this.getUserInfo();
		},
		methods: {
			async getUserInfo() {
				let res = await this.$api.get(`staff/my/index?shop_id=${this.shop_id}`);
				if(res.code == 200) {
					this.info = res.data.info;
					this.avatar = res.data.info.avator;
					this.name = res.data.info.name;
					var info = res.data.info.introduction;
					this.introduction = info ? info : '';
				}
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			logout() {
				uni.removeStorageSync('token');
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			uploadImg() {
				let that = this;
				uni.chooseImage({
					count:1,
					sourceType: ['album','camera'],
					success: res => {
						uni.showLoading()
						const tempFilePaths = res.tempFilePaths;
						const files = res.tempFiles;
						let imgArr = [];
						for (let i = 0; i < files.length; i++) {
							uni.uploadFile({
								url: `${config.baseUrl}uploadimgs`, //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								header: {
									"Authorization": uni.getStorageSync('token'),
								},
								success: (uploadFileRes) => {
									uni.hideLoading();
									let data = JSON.parse(uploadFileRes.data);
									that.avatar = data.data[0];
									that.changeInfo();
								},
								fail: (err) => {
									uni.hideLoading();
								}
							});
						}
					}
				});
			},
			async changeInfo() {
				let res = await this.$api.post('info/set', {
					name: this.name,
					avator: this.avatar,
					introduction: this.introduction
				});
				if(res.code == 200) {
					console.log(res,200);
				}
			},
			
		}
	}

</script>

<style lang="scss" scoped>
	.set_item {
		height: 120rpx;
		background-color: #FFF;
		margin-top: 20rpx;
		padding: 0 34rpx;
		font-size: 29rpx;
	}
	.border {
		border-bottom: 1rpx solid #F7F7F7;
	}
	.set_item_box {
		height: 92rpx;
		background-color: #FFF;
		padding: 0 34rpx;
		font-size: 29rpx;
		padding-right: 16rpx;
		&_right {
			justify-content: flex-end;
			text-align: right;
		}
		.gray {
			font-size: 27rpx;
			text-align: right;
			width: 400rpx;
		}
	}
	.head_icon {
		width: 80rpx;
		height: 80rpx;
	}
	.into {
		width: 11rpx;
		height: 19rpx;
		margin: 0 16rpx;
	}
	.btn {
		margin: 107rpx 27rpx;
		background-color: #F17816;
		color: #FFF;
		font-size: 32rpx;
		height: 93rpx;
		line-height: 93rpx;
	}
</style>